let id = localStorage.getItem("ID");
const getbanner = () => {
  jQuery.ajax({
    url: `http://www.xiongmaoyouxuan.com/api/detail?id=${id}&normal=1&sa=`,
    type: "get",
    data: {
      start: 0,
    },
    success(result) {
      if (result.code == 200) {
        let results = result.data;

        //  showShop(results.share)
        showImg(results.detail.descContentList);
        show_big(results.share.imageUrl);
        show_minpic(results.detail.photo); //放大镜下的小图
        details(results.share.title); //渲染描述
        merchant(results.shop); //右边旗舰店图片
        commodityPrice(results.detail); // 价格
        productCart(results); //加入购物车
      }
    },
  });
};
getbanner();

// ==========详情=============
function details(miaoshu) {
  let titles = document.querySelector(".titles");
  let str = `
  <img src="../static/tbxq.png" alt="" class="pic1">
   <img src="../static/byxq.png" alt="" class="pic2">
  `;
  str += miaoshu;
  titles.innerHTML = str;
}
// ==========详情结束=============

// ==========右边店名==========
function merchant(logo) {
  let data = {
    logo,
  };

  let htmlStr = template("shopInfo", data);
  let miaoshu = document.querySelector(".shop-info");
  miaoshu.innerHTML = htmlStr;
}

// ==========右边店名结束==========

//  ===大图渲染====
const showImg = (shears) => {
  let data = {
    shears,
  };
  // console.log(shears);
  let str = template("showPic", data);
  let xianshi = document.querySelector(".pic");
  xianshi.innerHTML = str;
};

//  =====放大镜渲染======
function show_big(imageUrl) {
  const images1 = document
    .querySelector(".showpic")
    .setAttribute("src", imageUrl);
  const images2 = document.querySelector(".zxc").setAttribute("src", imageUrl);
}

function show_minpic(minpicture) {
  let mpic = {
    minpicture,
  };

  let ulLIst = template("minipic", mpic);
  let minipic = document.querySelector(".silds");
  minipic.innerHTML = ulLIst;
}

// =======价格渲染=======

function commodityPrice(price) {
  let data = {
    price,
  };
  let priceStr = template("prices", data);
  let divEle = document.querySelector(".cmd-price");
  divEle.innerHTML = priceStr;
}
// couponValue券
// =========================价格渲染结束=============

/**
   放大镜类
 */

// 定义一个名为GlassZoom的类
class GlassZoom {
  constructor(id) {
    this.root = document.querySelector(id);
    this.mask = this.root.querySelector(".mask"); //遮罩层
    this.showBox = this.root.querySelector(".show-box"); //显示图片showBox
    this.showBoxImg = this.root.querySelector(".show-box>img"); //左边大图
    this.bigPicBox = this.root.querySelector(".right img"); // 背景图片bigPicBox
    this.glass = this.root.querySelector(".right"); //放大镜
    this.lisEle = this.root.querySelectorAll("li"); //小图
    this.minPic = this.root.querySelector("li>img");
  }

  /**
   * 初始化放大镜比例
   */
  initScale() {
    // 图片的宽度
    let bigPicWidth =
      (this.glass.offsetWidth * this.showBox.offsetWidth) /
      this.mask.offsetWidth;
    let bigPicHeight =
      (this.glass.offsetHeight * this.showBox.offsetHeight) /
      this.mask.offsetHeight;

    this.bigPicBox.style.width = bigPicWidth + "px";
    this.bigPicBox.style.height = bigPicHeight + "px";
  }

  /**
   * 放大镜核心功能
   */
  moveGlass() {
    //移入显示
    this.showBox.addEventListener("mouseover", () => {
      this.mask.style.display = "block";
      this.glass.style.display = "block";
    });
    //移出隐藏
    this.showBox.addEventListener("mouseout", () => {
      this.mask.style.display = "none";
      this.glass.style.display = "none";
    });

    //移动遮罩层,随光标移动
    this.showBox.addEventListener("mousemove", (e) => {
      e = e || window.event;

      let x = e.offsetX - this.mask.offsetWidth / 2;
      let y = e.offsetY - this.mask.offsetHeight / 2;

      if (x < 0) {
        x = 0;
      } else if (x > this.showBox.offsetWidth - this.mask.offsetWidth) {
        x = this.showBox.offsetWidth - this.mask.offsetWidth;
      }

      if (y < 0) {
        y = 0;
      } else if (y > this.showBox.offsetHeight - this.mask.offsetHeight) {
        y = this.showBox.offsetHeight - this.mask.offsetHeight;
      }

      this.mask.style.left = x + "px";
      this.mask.style.top = y + "px";

      // 背景图片移动
      let moveX = (x * this.glass.offsetWidth) / this.mask.offsetWidth;
      let moveY = (y * this.glass.offsetHeight) / this.mask.offsetHeight;

      this.bigPicBox.style.left = -moveX + "px";
      this.bigPicBox.style.top = -moveY + "px";
    });
  }
  // 选项卡
  onChangePicn() {
    let _this = this;
    for (let i = 0; i < this.lisEle.length; i++) {
      this.lisEle[i].addEventListener("click", function () {
        //先清除所有的样式
        _this.clearActive();
        //在设置样式
        this.classList.add("active");

        //更改显示图片
        _this.showBoxImg.setAttribute(
          "src",
          `../static/glass/show_${i + 1}.jpg`
        );

        //更改背景图
        _this.bigPicBox.setAttribute("src", `../static/glass/big_${i + 1}.jpg`);
      });
    }
  }

  // 清楚所有样式
  clearActive() {
    for (let i = 0; i < this.lisEle.length; i++) {
      this.lisEle[i].classList.remove("active");
    }
  }
}

let glassZoom = new GlassZoom("#glassone");
glassZoom.initScale();
glassZoom.moveGlass();
glassZoom.onChangePicn();
glassZoom.clearActive();

// ============放大镜结束==========

// ========回到顶部==========
function onBackTop() {
  var topDist = getScrollTop();
  var timer = setInterval(() => {
    topDist = topDist - 50;
    setScrollTop(topDist);
    if (topDist <= 0) {
      clearInterval(timer);
    }
  }, 10);
}
/**
 * 兼容性写法
 * 设置页面向上滚动的距离
 */
function setScrollTop(dist) {
  if (document.body.scrollTop) {
    document.body.scrollTop = dist;
  } else {
    document.documentElement.scrollTop = dist;
  }
}
/**
 * 页面向上滚动的距离
 */
function getScrollTop() {
  if (document.body.scrollTop) {
    return document.body.scrollTop;
  } else {
    return document.documentElement.scrollTop;
  }
}

// =====回到顶部结束===========

// =======加加减减功能=====
function additionSubtraction() {
  let num = 1; //变量
  // 加加
  // let plus = $(".plus"); //获取加的按钮

  $(".plus").on("click", function () {
    num++;
    $('input[name="quantity"]').val(num);
  });

  //  减减
  // let plus = $(".minus"); //获取加的按钮

  $(".minus").on("click", function () {
    num--;
    if (num < 1) {
      num = 1;
    }
    $('input[name="quantity"]').val(num);
  });
}
additionSubtraction();
// =======加加减减功能结束=====

// 点击加入购物车加入购物车

//  获取存储数据
function productCart(getAddress) {

 
  $(".left1").on("click", function () {
    
  
  // 1. localstorage获取数据
    let storage = localStorage.getItem("CARTS");
    let cartList = JSON.parse(storage) || [];

    let nums = $('input[name="quantity"]').val();
    let zongjia = Number(nums * getAddress.detail.price)
    console.log(zongjia);
    let newProduct = cartList.find((item) => item.ids == getAddress.shop.id);

    if (newProduct) {
      newProduct.quantity += parseInt(nums);
      newProduct.singtotalprice =newProduct.quantity *newProduct.singPrice
  
      //  let获取单价
    } else {
      let shuju = {
        ids: getAddress.shop.id,
        dizhi: getAddress.share.imageUrl,
        titles: getAddress.share.title,
        singPrice: getAddress.detail.price,
        quantity: parseInt(nums),
        singtotalprice: zongjia,
        state: false,
      };

      cartList.push(shuju);
    }

    localStorage.setItem("CARTS", JSON.stringify(cartList));
   if(confirm('确定加入购物车吗')){
  alert('加入成功')
   }

});
}


// 点击立即购买





